<div style="height: 100%;">
    <div class="tablesize roles" style=" padding:10px">
        <table id="instanceTable" lay-filter="instanceTable"></table>
    </div>
</div>
<script type="text/html" id="headerToolsBar">
    <div class="ccpui-enterSel">
    <div class="layui-btn-container" style="float: right;margin: 4px 0;">
        <a class="layui-btn layui-btn-sm" lay-event="query">
            <i class="layui-icon layui-icon-search"></i>
            <span>查询</span>
        </a>
    </div>
    <form class="layui-form" action="" style="margin-top:10px" id="instanceQueryForm" lay-filter="instanceQueryForm">
        <div class="table-top-filter">
            <div class="table-filter-alone">
                <label class="layui-form-label" style="padding-right: 5px;">流程实例标题</label>
                <i style="float: left;font-style: normal;line-height: 38px;margin-right: 5px;">:</i>
                <input type="text" name="Q_subject_SL"  class="layui-input filter-value"  autocomplete="off"/>
            </div>
            <div class="table-filter-alone">
                <label class="layui-form-label" style="padding-right: 5px;">状态</label>
                <i style="float: left;font-style: normal;line-height: 38px;margin-right: 5px;">:</i>
                <select name="Q_status_SN" class="filter-value">
                    <option value="">所有</option>
                    <option value="1" >正在运行</option>
                    <option value="2" >结束</option>
                    <option value="3" >人工结束</option>
                    <option value="5" >撤销</option>
                </select>
            </div>
            <div class="table-filter-alone">
                <label class="layui-form-label" style="padding-right: 5px;">创建时间 从</label>
                <i style="float: left;font-style: normal;line-height: 38px;margin-right: 5px;">:</i>
                <input type="text" name="Q_createTime_DL"  class="layui-input start_time filter-value "  autocomplete="off"/>
            </div>
            <div class="table-filter-alone">
                <label class="layui-form-label" style="padding-right: 5px;">至</label>
                <i style="float: left;font-style: normal;line-height: 38px;margin-right: 5px;">:</i>
                <input type="text" name="Q_endCreateTime_DG" id="endCreateTime" class="layui-input end_time filter-value"  autocomplete="off"/>
            </div>
        </div>
    </form>
    </div>
</script>


    <script>
        layui.use(['table','util','setter','common','commons','totalFilter'], function () {
        var table = layui.table
            ,util = layui.util
            ,setter  = layui.setter
            ,common = layui.common
            ,commons = layui.commons
            ,totalFilter = layui.totalFilter;
            common.tableSort('instanceTable');
        var tableH='full-210';
            renderTable(serverPath.workflowPath + setter.workflowLinkPath + 'actDefModel/instances?modelId=${modelId}')
            function renderTable(url) {
                table.render({
                    elem: '#instanceTable'
                    ,
                    title: '流程实例列表'
                    ,
                    height: tableH
                    ,
                    url:url
                    ,
                    method: 'post'
                    ,
                    toolbar: '#headerToolsBar'
                    ,
                    page: true
                    ,
                    cols: [[
                        {
                            field: 'subject',
                            title: '流程实例标题',
                            align: 'center',
                            minWidth: 350,
                            event: 'get',
                            style: 'color:#1E9FFF; cursor:pointer'
                        }
                        , {field: 'creator', title: '创建人', align: 'center'}
                        , {
                            field: 'createTime', title: '创建时间', sort: true, align: 'center', templet: function (d) {
                                if (d.createTime == undefined) {
                                    return "";
                                } else {
                                    return util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss");
                                }
                            }
                        }
                        , {
                            field: 'endTime', title: '结束时间', sort: true, align: 'center', templet: function (d) {
                                if (d.endTime == undefined) {
                                    return "";
                                } else {
                                    return util.toDateString(d.endTime, "yyyy-MM-dd HH:mm:ss");
                                }
                            }
                        }
                        , {
                            field: 'status', title: '状态', sort: true, align: 'center', templet: function (d) {
                                if (d.status == undefined) {
                                    return "";
                                }
                                if (d.status == 1) {
                                    return "正在运行";
                                }
                                if (d.status == 2) {
                                    return "结束";
                                }
                                if (d.status == 3) {
                                    return "人工结束";
                                }
                                if (d.status == 5) {
                                    return "撤销";
                                }
                                if (d.status == 6) {
                                    return "驳回";
                                }
                                if (d.status == 7) {
                                    return "追回";
                                }
                            }
                        }
                    ]]
                    ,
                    done: function () {
                        commons.reflashDate({startName: '.start_time', endName: '.end_time'});
                        common.tableSelectCon('.ccpui-enterSel .layui-form input', 'a[lay-event=query]', '.ccpui-enterSel')
                    }

                });
                totalFilter.init('instanceTable');
            }
        table.on('toolbar(instanceTable)', function (obj) {
            switch (obj.event) {
                case 'query':
                    commons.reflashDate({startName:'.start_time',endName:'.end_time'});
                    common.tableConditionRender("instanceTable", "instanceQueryForm", {where: {}}, false);
                    break;
            }
        });
        //监听行工具事件
        table.on('tool(instanceTable)', function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case 'get':
                    window.open(serverPath.workflowPath + setter.workflowLinkPath + 'processRun/view/get?runId=' + data.runId);
                    break;
            }
        });
    });
</script>
<style>
    #instanceQueryForm label.layui-form-label {
        width: 120px !important;
    }
    .instance .layui-table-tool-temp{
        padding: 0;
    }
    #instanceQueryForm .table-top-filter .filter-list{
        width: 90%;
    }
</style>